import { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import { ThemeContext } from 'src/context/ThemeContext';
import Step1 from './component/Step1';
import Step2 from './component/Step2';
import Step3 from './component/Step3';
import style from './EnableTfa.module.scss';

const EnableTfa = () => {
    const navigate = useNavigate();
    const { IcClosePrimary } = useContext(ThemeContext).image;
    const [getStepPageIndex, setStepPageIndex] = useState<number>(0);

    return (
        <div>
            <Button appearance="text" className={style.cancelButton} onClick={() => navigate(-1)}>
                <img src={IcClosePrimary} />
                取消
            </Button>
            {getStepPageIndex === 0 && <Step1 />}
            {getStepPageIndex === 1 && <Step2 />}
            {getStepPageIndex === 2 && <Step3 />}
            <div className={style.divider} />
            <div className={style.navigateBlock}>
                <div>
                    {getStepPageIndex > 0 && (
                        <BackButton
                            label="上一步"
                            onClick={() => setStepPageIndex(getStepPageIndex - 1)}
                        />
                    )}
                </div>
                <div>
                    {getStepPageIndex < 2 && (
                        <Button onClick={() => setStepPageIndex(getStepPageIndex + 1)}>
                            下一步
                        </Button>
                    )}
                </div>
            </div>
        </div>
    );
};

export default EnableTfa;
